<template>
  <div class="ablummain">
    <discoverm></discoverm>

    <div
      style="
        width: 980px;
        height: 2000px;
        margin: 0 auto;
        padding: 40px;
        border-left: solid 1px;
        border-right: solid 1px;
        border-bottom: solid 1px;
      "
      class="head"
    >
      <h3 class="all">
        <span
          style="font-size: 24px; width: 900px; height: 42px; line-height: 42px"
          >热门新碟</span
        >
      </h3>
      <ul class="plmain">
        <li v-for="item in hotablum" class="liil" @click="toPlaylist(item.id)">
          <div style="position: relative">
            <img
              :src="item.picUrl"
              alt=""
              style="width: 140px; height: 140px"
            />
          </div>
          <a href="#"
            ><p style="font-size: 14px; height: 18px; overflow: hidden">
              {{ item.name }}
            </p></a
          >
          <!-- <a href="#">
            <p style="font-size: 8px; height: 18px; overflow: hidden">
              {{ item.creator.nickname }}
            </p></a
          > -->
        </li>
      </ul>
      <h3 class="all">
        <span
          style="font-size: 24px; width: 900px; height: 42px; line-height: 42px"
          >全部新碟</span
        >
      </h3>
      <ul class="plmain" style="height:1440px">
        <li v-for="item in allablum" class="liil" @click="toPlaylist(item.id)">
          <div style="position: relative">
            <img
              :src="item.picUrl"
              alt=""
              style="width: 140px; height: 140px"
            />
          </div>
          <a href="#"
            ><p style="font-size: 14px; height: 18px; overflow: hidden">
              {{ item.name }}
            </p></a
          >
          <!-- <a href="#">
            <p style="font-size: 8px; height: 18px; overflow: hidden">
              {{ item.creator.nickname }}
            </p></a
          > -->
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import discoverm from "@/views/discoverM/discoverM.vue";
import axios from "axios";
export default {
  name: "album",
  data() {
    return {
      hotablum: [],
      allablum:[]
    };
  },
  components: {
    discoverm,
  },
  created() {
    axios({
      url: "http://localhost:3000/top/album?type=hot",
      method: "get",
      params: {
        limit: 10,
      },
    }).then((res) => {
      for (var g = 0; g <= 9; g++) {
        this.hotablum.push(res.data.monthData[g]);
      }
    });
    axios({
      url: "http://localhost:3000/album/new",
      method: "get",
      params: {
        limit: 35,
        area:'ALL'
        // offset: (this.pageNo - 1) * 35,

      },
    }).then((res) => {
      console.log(res)
      this.allablum=res.data.albums
    });
  },
  
};
</script>

<style>
* {
  margin: 0;
  padding: 0;
  /* css3盒子模型 */
  box-sizing: border-box;
  font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif;
}

/* 去掉li 的小圆点 */
li {
  list-style: none;
}
a {
  color: #666;
  text-decoration: none;
}
.liil {
  width: 140px;
  height: 188px;
  margin: 0 20px;
  padding-bottom: 30px;
  float: left;
}

.plmain {
  margin-top: 30px;
  width: 900px;
  height: 300px;
  margin-left: -20px;
  margin-top: 20px;
}
.all {
  width: 860px;
  border-bottom: 2px solid rgb(194, 12, 12);
}
.bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 27px;
  background-color: rgb(66, 58, 55, 0.7);
  padding: 8px;
  color: rgb(204, 204, 204);
  line-height: 12px;
  font-size: 12px;
}
.plelpa {
  position: absolute;
  bottom: -590px;
  left: 35%;
}
.el-dropdown-link {
  cursor: pointer;
  color: #409eff;
}
.el-icon-arrow-down {
  font-size: 12px;
}
</style>